<template>
  <el-container>
    <el-header>
      <div class="left-panel">
        <el-button type="success" @click="downloadExcel">导出EXCEL</el-button>
        <!-- <el-button type="primary" icon="el-icon-plus" @click="add"></el-button> -->
      </div>
      <div class="right-panel">
        <div class="right-panel-search">
          <el-input
            v-model="search.name"
            placeholder="企业名称"
            clearable
            @clear="getData()"
          >
          </el-input>
          <el-button type="primary" icon="el-icon-search" @click="getData()">
          </el-button>
          <el-button
            type="success"
            @click="getFilter()"
            style="margin-left: 10px"
          >
            高级查询
          </el-button>
        </div>
      </div>
    </el-header>
    <div class="filterParams">
      <el-tag
        v-for="(val, key, i) in filterParams"
        :key="key"
        closable
        type="warning"
        v-show="val"
        @close="closeTag(key)"
      >
        {{ key }}：{{ val }}
      </el-tag>
    </div>
    <el-main class="nopadding">
      <div class="nopaddingTable">
        <!-- ###去掉多余样式（宽度和下边距），增加表格高度100%样式，保证表格填满区域，同时也会影响到无数据提示的位置 -->
        <el-table
          :data="tableData"
          height="100%"
          row-key="id"
          stripe
          @sort-change="sortChange"
          element-loading-text="正在努力加载中..."
          v-loading="loading"
        >
          <el-table-column
            label="企业名称"
            prop="name"
            width="auto"
            show-overflow-tooltip
            sortable="custom"
          ></el-table-column>

          <el-table-column label="企业属地" prop="block" sortable width="auto">
          </el-table-column>
          <el-table-column
            label="统一社会信用代码"
            prop="unifiedCode"
            width="200"
            sortable="custom"
          ></el-table-column>

          <el-table-column
            label="联系人"
            prop="contact"
            width="auto"
            sortable="custom"
          ></el-table-column>
          <el-table-column
            label="联系电话"
            prop="contactNumber"
            width="auto"
            sortable="custom"
          ></el-table-column>

          <el-table-column
            label="注册日期"
            prop="regDate"
            width="auto"
            sortable="custom"
          ></el-table-column>

          <el-table-column
            label="摸查情况"
            prop="status"
            width="auto"
            sortable="custom"
          ></el-table-column>

          <el-table-column
            label="企业清单分类"
            prop="listClassification"
            width="auto"
            sortable="custom"
          >
            <template #default="scope">
              <p
                v-show="scope.row.listClassification == '提质清单'"
                style="color: orange"
              >
                {{ scope.row.listClassification }}
              </p>
              <p
                v-show="scope.row.listClassification == '稳岗清单'"
                style="color: red"
              >
                {{ scope.row.listClassification }}
              </p>
              <p
                v-show="scope.row.listClassification == '日常清单'"
                style="color: green"
              >
                {{ scope.row.listClassification }}
              </p>
              <p
                v-show="scope.row.listClassification == '拓岗清单'"
                style="color: purple"
              >
                {{ scope.row.listClassification }}
              </p>
              <p
                v-show="scope.row.listClassification == '剔除清单'"
              >
                {{ scope.row.listClassification }}
              </p>
            </template>
          </el-table-column>

          <el-table-column
            label="操作"
            fixed="right"
            align="center"
            width="220"
          >
            <template #default="scope">
              <el-button
                type="text"
                size="small"
                @click="details(scope.row, scope.$index)"
                >查看</el-button
              >
              <el-button
                type="text"
                size="small"
                @click="addFollow(scope.row, scope.$index)"
                >跟进填报</el-button
              >
              <el-button
                type="text"
                size="small"
                @click="infoFollow(scope.row, scope.$index)"
                >跟进信息</el-button
              >
              <!-- <el-popconfirm title="确定删除吗？" @confirm="del(scope.row)">
                <template #reference>
                  <el-button type="text" size="small" style="color: #f56c6c"
                    >删除</el-button
                  >
                </template>
              </el-popconfirm> -->
            </template>
          </el-table-column>
          <template #empty>
            <el-empty description="暂无数据" :image-size="100"></el-empty>
          </template>
        </el-table>
      </div>
      <el-footer>
        <el-pagination
          @size-change="sizeChange"
          @current-change="currentChange"
          background
          layout="total,prev, pager, next, sizes"
          :total="pagination.total"
          v-model:currentPage="pagination.pageNum"
          v-model:page-size="pagination.pageSize"
          :page-sizes="[5, 10, 20]"
        >
        </el-pagination>
      </el-footer>
    </el-main>
  </el-container>

  <save-drawer
    ref="saveDrawer"
    v-if="drawer.save"
    @onRefresh="onRefresh"
    @closed="drawer.save = false"
  ></save-drawer>

  <details-drawer
    ref="detailsDrawer"
    v-if="drawer.details"
    @onRefresh="onRefresh"
    @closed="drawer.details = false"
  ></details-drawer>

  <filter-drawer
    ref="filterDrawer"
    v-if="drawer.filter"
    @onRefresh="onRefresh"
    @closed="drawer.filter = false"
  ></filter-drawer>

  <info-follow-dialog
    ref="infoFollowDialog"
    v-if="drawer.infoFollow"
    @onRefresh="onRefresh"
    @closed="drawer.infoFollow = false"
  ></info-follow-dialog>
</template>

<script>
import saveDrawer from "./save";
import detailsDrawer from "./details";
import filterDrawer from "./filter";
import infoFollowDialog from "./infoFollow";

export default {
  name: "enterpriseList-index",
  components: {
    saveDrawer,
    detailsDrawer,
    filterDrawer,
    infoFollowDialog,
  },
  data() {
    return {
      tableData: [],
      loading: false,
      drawer: {
        save: false,
        details: false,
        infoFollow: false,
      },
      search: {
        page: 1,
        pageSize: 10,
        name: "",
        block: "",
        unifiedCode: "",
        contact: "",
        contactNumber: "",
        status: "",
        listClassification: "",
        orderData: "",
        sort: "",
      },
      filterParams: {
        企业名称: "",
        企业属地: "",
        统一社会信用代码: "",
        联系人: "",
        联系电话: "",
        摸查情况: "",
        企业清单分类: "",
      },
      filterArrayEN: [
        "name",
        "block",
        "unifiedCode",
        "contact",
        "contactNumber",
        "status",
        "listClassification",
      ],
      filterArrayCN: [
        "企业名称",
        "企业属地",
        "统一社会信用代码",
        "联系人",
        "联系电话",
        "摸查情况",
        "企业清单分类",
      ],
      pagination: {
        total: "",
        pageNum: "",
        pageSize: "",
      },
    };
  },

  watch: {
    $route(to, from) {
      if (to.fullPath != "/login") {
        this.drawer.infoFollow = false;
        this.getData();
      }
    },
  },
  mounted() {
    //渲染后执行
    this.getData(); //加载数据
  },
  methods: {
    // 刷新
    onRefresh(form) {
      if (form) {
        Object.assign(this.search, form);
      }
      this.getData();
    },
    //加载数据
    async getData() {
      this.loading = true;
      let res = await this.$API.enterpriseList.pageList.get(this.search);
      if (res.code == 0) {
        this.getFilterParams();
        if (res.data) {
          if (res.data.list) {
            this.tableData = res.data.list;
            this.pagination = {
              total: res.data.total,
              pageNum: res.data.pageNum,
              pageSize: res.data.pageSize,
            };
          } else {
            this.$alert("返回数据格式错误，请尝试刷新", "数据错误", {
              type: "error",
              confirmButtonText: "确定",
              dangerouslyUseHTMLString: true,
              showCancelButton: false,
            });
          }
        } else {
          this.$alert("返回数据格式错误，请尝试刷新", "数据错误", {
            type: "error",
            confirmButtonText: "确定",
            dangerouslyUseHTMLString: true,
            showCancelButton: false,
          });
        }
        this.loading = false;
      } else {
        this.loading = false;
        let errdata = this.$TOOL.response(res);
        this.$alert(
          this.$TOOL.json.get("", errdata, "message"),
          this.$TOOL.json.get("", errdata, "title"),
          {
            type: "error",
            confirmButtonText: "确定",
            dangerouslyUseHTMLString: true,
            showCancelButton: false,
          }
        );
      }
    },
    //跟进填报
    addFollow(data) {
      this.drawer.save = true;
      this.$nextTick(() => {
        const data2 = {};
        this.$refs.saveDrawer.open(data.id, data.name).setData(data2);
      });
    },
    // 跟进信息
    infoFollow(data) {
      this.drawer.infoFollow = true;
      this.$nextTick(() => {
        this.$refs.infoFollowDialog.open(data.id);
      });
    },
    //查看
    details(data) {
      this.drawer.details = true;
      this.$nextTick(() => {
        this.$refs.detailsDrawer.open(data.id);
      });
    },
    //高级查询
    getFilter() {
      this.drawer.filter = true;
      this.$nextTick(() => {
        this.$refs.filterDrawer.open(this.search);
      });
    },
    //分页
    sizeChange(val) {
      this.search.pageSize = val;
      this.getData();
    },
    currentChange(val) {
      this.search.page = val;
      this.getData();
    },
    //查询标签
    getFilterParams() {
      for (let i = 0; i < this.filterArrayCN.length; i++) {
        this.filterParams[this.filterArrayCN[i]] =
          this.search[this.filterArrayEN[i]];
      }
    },
    closeTag(key) {
      this.filterParams[key] = "";
      for (let i = 0; i < this.filterArrayCN.length; i++) {
        if (this.filterArrayCN[i] == key) {
          this.search[this.filterArrayEN[i]] = "";
        }
        if (!this.search.minRegDate) {
          this.search.maxRegDate = "";
        }
      }
      this.getData();
    },
    //排序
    sortChange(value) {
      this.search.orderData = value.prop;
      if (value.order == "ascending") {
        this.search.sort = "asc";
      } else if (value.order == "descending") {
        this.search.sort = "desc";
      } else {
        this.search.sort = "";
        this.search.orderData = "";
      }
      this.getData();
    },
    //导出
    async downloadExcel() {
      let params = {
        orderData:this.search.orderData,
        sort:this.search.sort
      }
      let res = await this.$API.enterpriseList.download.get(params);
      if (res.code == 500) {
          let errdata = this.$TOOL.response(res);
        this.$alert(
          this.$TOOL.json.get("", errdata, "message"),
          this.$TOOL.json.get("", errdata, "title"),
          {
            type: "error",
            confirmButtonText: "确定",
            dangerouslyUseHTMLString: true,
            showCancelButton: false,
          }
        );
      } else {
        const blob = new Blob([res]); 
        var a = document.createElement("a"); //创建a标签
        a.href = URL.createObjectURL(blob); // 把文件流赋值给a标签的href
        a.download = "企业清单分类.xls"; //利用a标签的download，自己设置文件名
        a.style.display = "none"; // 隐藏a标签
        document.body.appendChild(a); 
        a.click();  //点击a标签
        a.remove(); //删除a标签
      }
    },
  },
};
</script>

<style scoped>
</style>
